<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8款CSS3鼠标滑过图片动画效果 </title>
<link rel="stylesheet" type="text/css" href="css/hover-effects.css">
</head>
<body>
<div class="full-length">
	<div class="container">
		<!-- Effect-1 -->
		<h2><span>Effects 1</span></h2>
		<ul>
			<li>
				<div class="port-1 effect-1">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-1 effect-2">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-1 effect-3">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-1 End -->
		
		<!-- Effect-2 -->
		<h2><span>Effects 2</span></h2>
		<ul>
			<li>
				<div class="port-2 effect-1">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-2 effect-2">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-2 effect-3">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-2 End -->
		
		<!-- Effect-3 -->
		<h2><span>Effects 3</span></h2>
		<ul>
			<li>
				<div class="port-3 effect-1">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-3 effect-2">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-3 effect-3">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-3 End -->
		
		<!-- Effect-4 -->
		<h2><span>Effects 4</span></h2>
		<ul>
			<li>
				<div class="port-4 effect-1">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-4 effect-2">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-4 effect-3">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-4 End -->
		
		<!-- Effect-5 -->
		<h2><span>Effects 5</span></h2>
		<ul>
			<li>
				<div class="port-5 effect-1">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-5 effect-2">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-5 effect-3">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-5 End -->
		
		<!-- Effect-6 -->
		<h2><span>Effects 6</span></h2>
		<ul>
			<li>
				<div class="port-6 effect-1">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-6 effect-2">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-6 effect-3">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-6 End -->
		
		<!-- Effect-7 -->
		<h2><span>Effects 7</span></h2>
		<ul>
			<li>
				<div class="port-7 effect-1">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-7 effect-2">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-7 effect-3">
					<div class="image-box">
						<img src="images/img-1.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-7 End -->
		
		<!-- Effect-8 -->
		<h2><span>Effects 8</span></h2>
		<ul>
			<li>
				<div class="port-8 effect-1">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-1">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-8 effect-2">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-2">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
			<li>
				<div class="port-8 effect-3">
					<div class="image-box">
						<img src="images/img-2.jpg" alt="Image-3">
					</div>
					<div class="text-desc">
						<h3>Your Title</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
						<a href="#" class="btn">Learn more</a>
					</div>
				</div>
			</li>
		</ul>
		<!-- Effect-8 End -->
	</div>
</div>

</body>
</html>